<template>
	<div class="leftMenu">
		<div class="payCard">
			<div class="userInfoBox">
				<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
					:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<div class="info">
					<p class="userName"> <span>xiaobao</span> <i @click="dialogFormVisible = true" class="iconfont icon-icon_amend_name cursorP"></i></p>
					<p class="jionDay"> Gia nhập ngày thứ 29 </p>
				</div>
			</div>
			<div class="userMoney">
				<div class="money">99,541,000</div>
				<div class="balanceBox"><span>Số dư</span><i class="iconfont icon-icon_refresh_gold_12"></i></div>
				<div class="payInfo">
					<div><span>Nạp tiền</span></div>
					<div><span>Rút tiền</span></div>
				</div>
			</div>
		</div>
		<el-menu background-color="rgb(41, 51, 86)" text-color="rgb(144, 162, 220)" active-text-color="#e9cfa4"
			:default-active="$route.path" :router="true">
			<el-menu-item class="menuItem" index="/user/information"><span
					class="iconfont menuIcon icon-icon_personal_data"></span><span>Thông tin cá nhân</span>
			</el-menu-item>
			<el-menu-item class="menuItem" index="/user/myPurse"><span
					class="iconfont menuIcon icon-icon_my_wallet_nor"></span><span>Ví tiền của tôi</span></el-menu-item>
			<el-menu-item class="menuItem" index="/user/transactionRecord"><span
					class="iconfont menuIcon icon-icon_top_up_record"></span><span>Quỹ tiền</span></el-menu-item>
			<el-menu-item class="menuItem" index="/user/capitalDetail"><span
					class="iconfont menuIcon icon-icon_vote_record"></span><span>Chi tiết giao dịch </span>
			</el-menu-item>
			<el-menu-item class="menuItem" index="/user/betHistory"><span
					class="iconfont menuIcon icon-icon_stake"></span><span>Lịch sử</span></el-menu-item>
			<el-menu-item class="menuItem" index="/user/message"><span
					class="iconfont menuIcon activeColor icon-icon_message_centre"></span><span>Hòm thư</span>
			</el-menu-item>
			<el-menu-item class="menuItem" index="/help"><span
					class="iconfont menuIcon icon-icon_help_centre"></span><span>Trung tâm trợ giúp</span>
			</el-menu-item>
			<el-menu-item class="menuItem" index="/user/lotteryResult"><span
					class="iconfont menuIcon icon-icon_draw_notice"></span><span>Kết quả mở thưởng</span></el-menu-item>
			<el-menu-item class="menuItem signOutItem" index="/"><span>Đăng xuất</span></el-menu-item>
		</el-menu>
		<!-- 弹出 -->
		<el-dialog title="Biệt danh" :visible.sync="dialogFormVisible" width="400px">
			<el-form :model="form">
				<el-form-item  >
					<el-input v-model="form.name" placeholder="Vui lòng nhập biệt danh của bạn (4-15 ký tự)"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flexCenter">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'aside',
		data() {
			return {
				dialogFormVisible:false,
				form: {
					name: 'xiaobao',
				},
				imageUrl: 'https://xosobet.com/server/upload/chat/img/61ac5dbd8ed66.png'
			};
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
	}
</script>
<style type="text/css">
	.el-navbar {
		height: 72px;
	}

	.el-navbar {
		border-bottom: 0 !important;
	}

	.el-menu--horizontal.el-navbar>.el-menu-item {
		height: 71px;
		line-height: 70px;
		width: 80px;
		margin: 0 20px;
		text-align: center;
	}
</style>
